<!-- 导航部分 -->
<template>
  <div class="home_bottom">
    <ul>
      <li v-for="(item, i) in list" :key="i" 
          :class="i === index ? 'currentL' : ''"
          @click="clickLi(i)">
        <nuxt-link :to="item.path">{{item.title}}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      list: [
        { path: '/', title: '首页' },
        { path: '/strategy', title: '攻略中心' },
        { path: '/match', title: '赛事中心' },
        { path: '/newTour', title: 'IP新游' },
      ]
    }
  },
  methods: {
    clickLi (index) {
      this.index = index;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~/assets/style/global.scss';

.home_bottom {
  width: 100%;
  height: 1.1rem;
  margin-top: 1.19rem;
  background-color: $orange;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0;
    li {
      position: relative;
      font-size: 0.33rem;
      letter-spacing: .02rem;
      &::after {
        position: absolute;
        bottom: -0.05rem;
        content: "";
        display: block;
        width: 100%;
        height: .06rem;
        background-color: transparent;
        transition: all 1s ease;
      }
      a {
        color: #fff;
      }
    }
    li.currentL {
      &::after {
        background-color: #fff;
      }
    }
  }
}
</style>